<template>
    <div>
         <el-menu mode="horizontal" default-active="1">
            <el-menu-item index="1">指南</el-menu-item>
            <el-menu-item index="2">组件</el-menu-item>
            <!-- 二级菜单添加el-submenu标签 -->
            <el-submenu index="3">
                <!-- 主题添加template标签 -->
                <template slot="title">主题</template>
                <el-menu-item index="3-1">中国红</el-menu-item>
                <el-menu-item index="3-2">星空蓝</el-menu-item>
                <el-menu-item index="3-3">炫酷黑</el-menu-item>
            </el-submenu>
            <el-menu-item index="4">资源</el-menu-item>
         </el-menu>
         
         <el-menu 
         class="menu"  
         default-active="1"
         text-color="#30353a"
         active-text-color="#5a5ce8">

            <el-menu-item index="1">指南</el-menu-item>
            <el-menu-item index="2">组件</el-menu-item>
            <!-- 二级菜单添加el-submenu标签 -->
            <el-submenu index="3">
                <!-- 主题添加template标签 -->
                <template slot="title">主题</template>
                <el-menu-item index="3-1">中国红</el-menu-item>
                <el-menu-item index="3-2">星空蓝</el-menu-item>
                <el-menu-item index="3-3">炫酷黑</el-menu-item>
            </el-submenu>
            <el-menu-item index="4">资源</el-menu-item>
         </el-menu>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss" scoped>
    // .el-menu-item.is-active{
    //     color: red;
    // }
.menu{
    width: 200px;
    
}
</style>